<template>
<div>
    <el-tabs type="border-card" v-model="activeName" class="smooth-tabs" @tab-click="handleClick"
             style="max-height: 100%; box-sizing: border-box;">

      <el-tab-pane label="在制表" name="first">
        <div style="overflow-x: auto">
          <el-table :border="true" :stripe="true" :height=tableHeight
                    :data="wipTable.filter(data => {
      const name = data.name? data.name.toString() : '';
      const brand = data.brand? data.brand.toString() : '';
      const model = data.model? data.model.toString() : '';
      return!search ||
             name.toLowerCase().includes(search.toLowerCase()) ||
             brand.toLowerCase().includes(search.toLowerCase()) ||
             model.toLowerCase().includes(search.toLowerCase());
    })" size="mini" @selection-change="handleSelectionChange" id="printArea">
            <el-table-column label="序号" type="index" min-width="5%"></el-table-column>
            <el-table-column label="名称" min-width="15%">
              <template slot-scope="scope">
                <el-input v-model="scope.row.name" :disabled="editingIndex !== scope.$index"
                          :class="{editable: editingIndex === scope.$index}"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="规格/图号" min-width="25%">
              <template slot-scope="scope">
                <el-input v-model="scope.row.model" :disabled="editingIndex !== scope.$index"
                          :class="{editable: editingIndex === scope.$index}"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="项目号" min-width="10%">
              <template slot-scope="scope">
                <el-input v-model="scope.row.unit" :disabled="editingIndex !== scope.$index"
                          :class="{editable: editingIndex === scope.$index}"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="适用机型" min-width="15%">
              <template slot-scope="scope">
                <el-input v-model="scope.row.number" :disabled="editingIndex !== scope.$index"
                          :class="{editable: editingIndex === scope.$index}"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="供应商" min-width="15%">
              <template slot-scope="scope">
                <el-input v-model="scope.row.supplier" :disabled="editingIndex !== scope.$index"
                          :class="{editable: editingIndex === scope.$index}"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="单位" min-width="5%">
              <template slot-scope="scope">
                <el-input v-model="scope.row.unit" :disabled="editingIndex !== scope.$index"
                          :class="{editable: editingIndex === scope.$index}"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="数量" min-width="5%">
              <template slot-scope="scope">
                <el-input v-model="scope.row.number" :disabled="editingIndex !== scope.$index"
                          :class="{editable: editingIndex === scope.$index}"></el-input>
              </template>
            </el-table-column>
            <el-table-column type="selection" min-width="5%"></el-table-column>
            <el-table-column min-width="15%">
              <template slot="header" slot-scope="scope">
                <el-input
                    v-model="search" clearable
                    size="mini"
                    placeholder="输入关键字搜索"/>
              </template>
              <template slot-scope="scope">
                <el-button v-if="editVisible || showAllWarehousingRecord"
                           size="mini" type="text"
                           @click="records(scope.row.code)">出入库记录
                </el-button>
                <el-button
                    size="mini" type="text" @click="edit(scope.$index,scope.row)" v-if="editVisible">编辑
                </el-button>
                <el-button
                    size="mini" type="text" @click="update()" v-if="editingIndex === scope.$index">提交
                </el-button>
                <el-button
                    size="mini" type="text" @click="cancel()" v-if="editingIndex === scope.$index">取消
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="display: flex; align-items: center; justify-content: left; gap: 10px; margin-top: 10px;
      border: #1989FA">
          <el-button size="mini" type="primary" @click="addItem()" slot="reference" v-if="editVisible">创建在制品</el-button>
          <el-button size="mini" @click="warehousing()" type="primary" slot="reference">入库</el-button>
          <el-button size="mini" type="primary" @click="outbound()">出库</el-button>
          <el-button size="mini" type="primary" @click="printTable()" slot="reference" v-if="editVisible">打印</el-button>
          <el-button size="mini" type="primary" @click="exportWMSTable()" slot="reference" v-if="editVisible">导出Excel
          </el-button>
        </div>
      </el-tab-pane>

      <el-tab-pane label="入库申请记录" name="second">

      </el-tab-pane>

      <el-tab-pane label="出库申请记录" name="third">

      </el-tab-pane>
    </el-tabs>
</div>
</template>

<script>
import {mapActions, mapGetters} from "vuex";
import printJS from "print-js";

export default {
  name: "WIP",
  data(){
    return{
      wipTable:[],
      search:'',
      selectedRows:[],
      editVisible: false,
    }
  },
  computed: {
    tableHeight() {
      // 假设页面顶部和底部占用的总高度为 150px
      const offsetHeight = 220; // 调整这个值以适应您的页面布局
      return `calc(100vh - ${offsetHeight}px)`;
    },
    ...mapGetters(['getActiveTab']),
    activeName: {
      get() {
        return this.getActiveTab;
      },
      set(value) {
        this.updateActiveTab(value);
      }
    }
  },
  methods:{
    ...mapActions(['updateActiveTab']),
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleSelectionChange(val) {
      this.selectedRows = val;
    },
    checkPermissions() {
      const userInfo = JSON.parse(localStorage.getItem('user')); // 确保这里是正确的键名
      this.showPriceColumn = userInfo.authorities.some(authority => authority.authority === 'ROLE_SHOW_PRICE');
      this.editVisible = (userInfo.username === 'cuijin' || userInfo.username === 'cfswt');
    },
    printTable() {
      printJS({
        printable: 'printArea',
        type: 'html',
        style: `
           .el-table {
                font-size: 13px;
                width: 100%;
            }
           .el-table tr th,
           .el-table tr td {
                padding: 0px;
                white-space: nowrap;
                border-collapse: collapse !important;
                line-height: 20px; box-sizing: border-box !important;
                text-align: left;
                border: 1px solid #eee;
                font-weight: 100;
            }
           .el-table tr th:nth-child(10),
           .el-table tr td:nth-child(10) { display:none !important;  }
           .el-table tr th:nth-child(11),
           .el-table tr td:nth-child(11) { display:none !important;  }
           .el-input__inner {
                width: 100% !important;
                box-sizing: border-box !important;
                padding: 0;
                border: none !important; font-size:12px !important; font-weight:100 !important;
                margin: 0; background-color:transparent !important;
            }
        `,
        scanStyles: true,
      });
      console.log("打印完成");
    },
  },
  mounted() {
    this.checkPermissions()
  }
}
</script>

<style scoped>

</style>